$(function () {
    getAjax();
    getCity();
    getLogin()
    getBack()
});

// 返回
function getBack() {
    $(".back").on("click", () => {
        location = "index_wzt.html";
    });
}

// 点击登录
function getLogin() {
    $(".login").on("click", () => {
        location = "login_wzt.html";
    });
}

// 点击地区切换地区
function getCity() {
    $(".city").on("click", () => {
        location = "city_lcz.html";
    });
}

// 懒加载
  onscroll = lazyLoad

  function lazyLoad() {
    let clientHeight = document.documentElement.clientHeight
    let scollTop = document.documentElement.scrollTop || 0
    console.log(clientHeight, scollTop)
    let lazy = document.getElementsByClassName('lazy')
    for (let i = 0; i < lazy.length; i++) {
      let top = getPoint(lazy[i])
      console.log(top)
      if (scollTop + clientHeight > top + 100) {
        lazy[i].src = lazy[i].getAttribute('imgSrc')
        lazy[i].removeAttribute('imgSrc')
        lazy[i].className = ''
      }
    }
  }

  let getPoint = (obj) => {
    let t = obj.offsetTop
    while ((obj = obj.offsetParent)) {
      t += obj.offsetTop
    }
    return t
  }

// 渲染数据
async function getAjax() {
    let res = await axios.get("http://127.0.0.1:3033/xinfang", {});
    // console.log(res);
    let arr = res.data;
    console.log(arr);
    let count = [
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
  ];
    for (let i = 0; i < 3; i++) {
        let ste = `
              <li>
                  <div class="nav_l">
                      <img src="./img/${count[i]}.jpg " alt="">
                  </div>
                  <div class="nav_r">
                      <div class="nav_r_tt">
                          <p class="title">${arr[i].title}</p>
                          <span class="describe">${arr[i].describe}</span>
                      </div>
                      <div class="nav_r_tb">
                          <p class="count">${arr[i].count}</p>
                          <p class="unit">${arr[i].unit}</p>
                      </div>
                      <div class="nav_r_bt">
                          <p>${arr[i].plcae}</p>
                          <p>|</p>
                          <p>${arr[i].plcae1}</p>
                          <p>|</p>
                          <p>${arr[i].plcae2}</p>
                      </div>
                      <div class="nav_r_bb">
                        <p>${arr[i].keywords}</p>
                     </div>
                  </div>
              </li>
          `;
        $(".nav_main").append(ste);
    }
    for (let i = 3; i < arr.length; i++) {
        let str = `
        <li>
        <div class="nav_l">
            <img src="./img/load.gif" imgSrc="./img/${count[i]}.jpg" class="lazy" alt="">
        </div>
        <div class="nav_r">
            <div class="nav_r_tt">
                <p class="title">${arr[i].title}</p>
                <span class="describe">${arr[i].describe}</span>
            </div>
            <div class="nav_r_tb">
                <p class="count">${arr[i].count}</p>
                <p class="unit">${arr[i].unit}</p>
            </div>
            <div class="nav_r_bt">
                <p>${arr[i].plcae}</p>
                <p>|</p>
                <p>${arr[i].plcae1}</p>
                <p>|</p>
                <p>${arr[i].plcae2}</p>
            </div>
            <div class="nav_r_bb">
              <p>${arr[i].keywords}</p>
           </div>
        </div>
    </li>
`;
        $(".nav_main").append(str);
    }
}
